<template>
	<view>
		<u-navbar
			placeholder
			:title="$t('my.feedback.navBartext')"
			:autoBack="true"
			:fixed="false"
		></u-navbar>
		<view class="content">
			<view class="box">
				<text class="title">{{ $t('my.feedback.contentText') }}</text>
				<u--textarea
					v-model="content"
					border="none"
					:placeholder="$t('my.feedback.inputText')"
				></u--textarea>
			</view>
			<view class="box">
				<text class="title">{{ $t('my.feedback.imageText') }}</text>
				<upload maxNum="6" @removeImage="deleteImage" @successImage="setImage"></upload>
			</view>
			<view class="btn" style="display: flex;justify-content: space-evenly;">
				<u-button
					:disabled="content == ''"
					:text="$t('my.feedback.btnText')"
					shape="circle"
					@click="submit"
					:customStyle="btnStyle"
				></u-button>
				<u-button
				@click="handerFeed"
					:text="$t('my.feedback.btnText1')"
					shape="circle"
					:customStyle="{
						background: '#333',
						color: '#fff',
						border: 'none',
						width: '40%',
						height: '88rpx'
					}"
				></u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			content: '',
			btnStyle: {
				background: '#FFC100',
				color: '#000',
				border: 'none',
				width: '40%',
				height: '88rpx'
			},
			images: []
		};
	},
	methods: {
		handerFeed(){
			uni.navigateTo({
				url:'/pagesA/feedbackdetails/feedbackdetails'
			})
		},
		deleteImage(e) {
			this.images.splice(e.index, 1);
		},
		setImage(e) {
			if (e.code == 1) {
				this.images.push(e.data.url);
			}
		},
		submit() {
			uni.showLoading({
				title: '加载中'
			});
			this.$http
				.post('wanlshop/feedback/add', {
					content: this.content,
					images: this.images
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								duration: 1000,
								message: '提交成功',
								complete() {
									uni.navigateBack();
								}
							});
						}, 300);
					}
				});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f7f9;
}
</style>
<style lang="scss" scoped>
/deep/.u-textarea {
	padding: 0 !important;
}

.content {
	padding: 30rpx;

	.box {
		background-color: #fff;
		padding: 35rpx 30rpx;
		border-radius: 20rpx;
		box-shadow: 5px 5px 18px 0px rgba(232, 234, 236, 0.51);
		display: grid;
		grid-template-columns: 80px auto;
		margin-bottom: 20rpx;

		.title {
			color: #141414;
			font-size: 30rpx;
		}
	}

	.btn {
		position: fixed;
		left: 0;
		bottom: 15%;
		width: 100%;
	}
}
</style>
